<!DOCTYPE html>
<html>
<head>
<title>X-Fade Sample Screen</title>
</head>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAA6TATzzCXkZlaH5DAfHyNhhSSORTKtX-C9Lrlhvi-M73652YbnxRCzX726TOSSIU7MM2Bxsp-Vzz_qg"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<link rel="stylesheet" href="<?=base_url('/client_libraries/jquery-ui-1.8.16.custom-xfade/css/custom-theme/jquery-ui-1.8.16.custom.css')?>" />
<script src="<?=base_url('/client_libraries/jquery-ui-1.8.16.custom-xfade/development-bundle/external/jquery.metadata.js')?>"></script>
<script src="<?=base_url('/client_libraries/jquery-slider2d/js/jquery.ui.slider2d-v2.js')?>"></script>
<link rel="stylesheet" href="<?=base_url('/client_libraries/jquery-slider2d/css/jquery.ui.slider2d.css')?>" />
<script src="<?=base_url('/client_libraries/flexigrid-1.1/js/flexigrid.js')?>"></script>
<link rel="stylesheet" href="<?=base_url('/client_libraries/flexigrid-1.1/css/flexigrid.css')?>" />
<script src="<?=base_url('/client_libraries/jquery-swfobject-1.1.1/jquery-swfobject.js')?>"></script>
<script src="<?=base_url('/client_libraries/jquery-form-plugin/js/jquery.form.js')?>"></script>
<link rel="stylesheet" href="<?=base_url('/client_libraries/chosen/chosen.css')?>" />
<script src="<?=base_url('/client_libraries/chosen/chosen.jquery.js')?>"></script>
<style>
body {
	margin:0px;
	padding: 6px 0px;
	background: #cccccc;
}
.container {
	width:800px;
	margin-left:auto;
	margin-right:auto;
}

.hContainer {
	width:auto !important;
}

.main {
	width:100%;
}

.main.top h1 {
	text-align:center;
}
.main.body {
	clear:both;
}

.playlist {
	width:250px;
	margin:2px;
}



.left {
	float:left;
}

.right {
	float:right;
}

.main.body table {
	width:100%;
}

.center-block {
	display: block !important;
	position: static !important;
	margin:0 auto !important;
}

.music-btn {
	width:200px;
}

.player {
	width:600px;
	background-color:#000000;
	color: #FFFFFF;
	height: 400px;
	display: block !important;
	position: static !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom:10px;
}

.main.body .middle {
	margin:0 250px;
	padding-top: 11em;
	font-size:.9em;
	width: 300px;
}
.playlist-sortable { list-style-type: none; margin: 0; padding: 0; width: auto; min-height:95%;}
.playlist-sortable div { margin: 0 5px 5px 5px; padding: 5px; font-size: .9em; min-height: 1.5em; max-width: 90%; }
html>body div.playlist-item { display:block; padding: 5px; font-size:12px; min-height: 1.5em; line-height: 1.2em; list-style-type: none;  }
/*.playlist .playlist-item {text-size:70% !important;}*/
.playlist-sortable .ui-state-highlight { height: 1.5em; line-height: 1.2em; background:#262626; }
.playlist .ui-accordion-content { padding:4px; }

.track-dialog input{
	width:250px;
}

.track-dialog input[type=file]{
	width:250px;
}

.track-dialog label{
	width:150px;
	display:block;
}

.playlist-controller{
	font-size:.6em;
}

.playlist-progressbar{
	font-size:.4em;
}

</style>
<script type="text/javascript">
var player=null;
var track_list = null;
var playlists = Array(4);

function load_track(track_url,playlist){
	console.log("load_track()",track_url,playlist);
	player.flash(function(){
		console.log(this);
		this.loadTrack(track_url,playlist);
	});
}

function play_track(playlist,resume,percent){
	console.log("play_track()",playlist,resume,percent);
	player.flash(function(){
		this.playTrack(Number(playlist),resume,Number(percent));
	});
}

function pause_track(playlist){
	player.flash(function(){
		this.pauseTrack(playlist);
	});
}

function adjust_volume(pl1Volume,pl2Volume,pl3Volume,pl4Volume) {
	player.flash(function(){
		//console.log(pl1Volume,pl2Volume,pl3Volume,pl4Volume);
		this.adjustVolume(Number(pl1Volume),Number(pl2Volume),Number(pl3Volume),Number(pl4Volume));
	});
}

function loadProgress(playlist, percent){
	console.log("loadProgress()",playlist,percent);
	playlists[playlist].update_load_progress(percent);
}

function loadComplete(playlist){
	console.log("loadComplete()",playlist,playlists[playlist]);
	playlists[playlist].load_complete();
}

function playbackProgress(playlist, percent){
	//console.log("playbackProgress()",playlist,percent);
	playlists[playlist].update_seek_progress(percent);
}

function playbackComplete(playlist){
	console.log("playbackComplete()",playlist,percent);
	playlists[playlist].playback_complete();
}

function setup_playlist_obj(containerel){
	var id = $(containerel).attr('id').replace('playlist-','');
	var playlist = {
		js_id: Number(id),
		fl_id: Number(id-1),
		container: $(containerel),
		item_container: $('.playlist-sortable',containerel),
		controller: $('.playlist-controller',containerel),
		prev_btn: $('.previous-button',containerel),
		play_btn: $('.play-button',containerel),
		pause_btn: $('.pause-button',containerel),
		next_btn: $('.next-button',containerel),
		seekbar: $('.pos-slider',containerel),
		progresscontainer: $('.playlist-progressbar',containerel),
		progressbar: $('.load-progress',containerel),
		track_items:$([]),
		now_playing: false,
		loaded_item: false,
		onLoad_callback:null,
		update_items: function(){ // to be called on list change.
			var old_next = this.track_items[Number($.inArray(this.now_playing, this.track_items)+1) % this.track_items.length];
			var self = this;
			this.track_items = Array();
			$('.playlist-item',containerel).each(function(index,el){
				self.track_items.push($(el).data('track_item'));
			});
			if( this.now_playing && $.inArray(this.now_playing, this.track_items)==-1 ){
				this.stop_playback();
				this.now_playing=false;
				this.load_item($.inArray(this.now_playing,old_next));
			}
		},
		start_playback: function() {
			console.log("start_playback",this);
			if(this.loaded_item==false){
				this.load_next_item();
			} else {
				if(this.now_playing){
					play_track(this.fl_id,false,0);
				} else {
					this.now_playing = this.loaded_item;
					play_track(this.fl_id);
				}
			}
			
			this.play_btn.hide();
			this.pause_btn.show();
		},
		resume_playback: function(){
			play_track(this.fl_id,true);
			this.play_btn.hide();
			this.pause_btn.show();
		},
		stop_playback: function(){
			pause_track(this.fl_id);
			this.play_btn.show();
			this.pause_btn.hide();
		},
		play_next: function(){
			if(this.track_items.length>0){
				this.load_item(Number($.inArray(this.loaded_item,this.track_items)+1) % this.track_items.length);
			}
		},
		play_prev: function(){
			if(this.track_items.length>0){
				this.load_item(Number($.inArray(this.loaded_item,this.track_items)-1) % this.track_items.length);
			}
		},
		playback_complete:function(){
			this.play_next.apply(this);
		},
		load_next_item: function() {
			this.play_next.apply(this);
		},
		load_item: function(index) {
			this.update_seek_progress(0);
			this.progresscontainer.stop().slideDown('slow');
			if (this.track_items.length>0) {
				this.stop_playback();
				this.loaded_item=this.track_items[index % this.track_items.length];
				load_track(this.loaded_item.track_location,this.fl_id);
			}
		},
		load_complete: function() {
			this.now_playing = this.loaded_item;
			if($.isFunction(this.onLoad_callback)){
				this.onLoad_callback();
			}
			this.start_playback();
			this.onLoad_callback = null;
			this.progresscontainer.stop().slideUp('slow');
		},
		update_load_progress: function(percent){ // updates GUI
			this.progressbar.progressbar('option','value',percent);
		},
		set_seek: function(percent) { // updates flash
			play_track(this.fl_id,false,percent);
		},
		update_seek_progress: function(percent) { // updates GUI
			console.log("update_seek_progress",percent);
			this.seekbar.slider('option','value',percent);
			if(percent==100){
				this.play_next.apply(this);
			}
		},
		add_item: function(track_item) {
			var playlist_template = $("<div class=\"playlist-item ui-state-default ui-corner-all\"><u></u> by <i></i></div>");
			$('u',playlist_template).html(track_item.title);
			$('i',playlist_template).html(track_item.artists_str);
			playlist_template.data('track_item',track_item);
			playlist_template.appendTo(this.item_container);
			this.update_items();
		},
		init: function() { // finally, set init function to connect all gui elements.
			var self = this;
			self.prev_btn.click(function(){
				self.play_prev.apply(self);
			});
			self.play_btn.click(function(){
				if(!self.now_playing){
					self.start_playback.apply(self);
				} else {
					self.resume_playback.apply(self);
				}
			});
			self.pause_btn.click(function(){
				self.stop_playback.apply(self);
			}).hide();
			self.next_btn.click(function(){
				self.play_next.apply(self);
			});
			self.seekbar.slider({min:0,max:100,value:0,range:'min',animate:'fast',
				stop:function(event,ui){
					self.set_seek(ui.value);
				}
			});
			
			self.progressbar.progressbar();
			self.progresscontainer.hide();
		}
	};
	playlist.init();
	return playlist;
}

$(function(){
	player = $('#player');
	player.flash({ // see http://jquery.thewikies.com/swfobject/examples for more information on this tool.
		swf: "swf/visualizer.swf",
		width: 600,
		height:400
	});

	$('select','.track-dialog').width('250');
	$('select','.track-dialog').chosen({
		use_themeroller:true,
		allow_add:true,
		no_results_text: "Artist not found!"
	});
	$('input','.track-dialog')
		.addClass('ui-widget ui-widget-content ui-corner-all')
		.css({
			'outline': 'none',
			'padding': '3px 6px'
		}).width(function(){
			return $(this).width()-12;
		});
	
	$('.previous-button').button({
		text:false,
		icons:{
			primary: 'ui-icon-seek-prev'
		}
	});
	
	$('.play-button').button({
		text:false,
		icons:{
			primary: 'ui-icon-play'
		}
	});
	
	$('.pause-button').button({
		text:false,
		icons:{
			primary: 'ui-icon-pause'
		}
	});
	
	$('.next-button').button({
		text:false,
		icons:{
			primary: 'ui-icon-seek-next'
		}
	});
	
	$('.buttonset').buttonset();
	$('.pos-slider').css('float:right;');
	
	$('div.playlist').each(function(index,el){
		var temp_playlist = setup_playlist_obj(el);
		console.log(temp_playlist);
		playlists[temp_playlist.fl_id]=temp_playlist;
	});
	
	
	$('.music-btn').button();
	
	var flexigrids = $( [] ).add( $("#track_manager_table") ).add( $("#track_finder_table") );
	
	$("#track_manager_table").flexigrid({
		url: '<?=site_url("ajax/tracks/get")?>',
		dataType: 'json',
		colModel : [
			{display: 'Title', name : 'title', width : 370, sortable : true, align: 'left'},
			{display: 'Artist(s)', name : 'artists_str', width : 185, sortable : true, align: 'left'}
			],
		buttons : [
			{name: 'Add', bclass: 'add',onpress: function(com,grid){
				$('#add-track-dialog form').resetForm();
				$('#add-track-dialog select').trigger("liszt:updated");
				$('#add-track-dialog').dialog("open");
			}},
			{name: 'Edit', bclass: 'edit',onpress: function(com,grid){
				$('.trSelected',grid).each(function(){
					var id = $(this).attr('id');
					id = id.substring(id.lastIndexOf('row')+3);
					$.getJSON('<?=site_url("ajax/tracks/get")?>/'+id,function(data){
						$("#edit-track-track_id").val(data.track_id);
						$("#edit-track-title").val(data.title);
						$("#edit-track-artists").val(data.artists).trigger("liszt:updated");
						$('#edit-track-dialog').dialog("open");
					});
				});
				
			}},
			{name: 'Delete', bclass: 'delete',onpress: function(){
				$('.trSelected',grid).each(function(){
					var id = $(this).attr('id');
					id = id.substring(id.lastIndexOf('row')+3);
					$.getJSON('<?=site_url("ajax/tracks/remove")?>/'+id,function(data){
						if(data.success=="fail"){
							alert(data.error);
						} else {
							alert('Successfully deleted the track.');
						}
					});
				});
			}},
			{separator: true}
			],
		searchitems : [
			{display: 'Title', name : 'title'},
			{display: 'Artist', name : 'artists', isdefault: true}
			],
		sortname: "title",
		sortorder: "asc",
		usepager: true,
		title: 'Tracks',
		useRp: true,
		rp: 15,
		themeRoller:true,
		width: 580,
		height: 380,
		singleSelect: true
	});
	
	$('#track-selector').width(580);
	
	$("#track_finder_table").flexigrid({
		url: '<?=site_url("ajax/tracks/get")?>',
		dataType: 'json',
		colModel : [
			{display: 'Title', name : 'title', width : 370, sortable : true, align: 'left'},
			{display: 'Artist(s)', name : 'artists', width : 185, sortable : true, align: 'left'}
			],
		buttons : [
			{name: 'Add', bclass: 'add',onpress: function(com,grid){
				$('.trSelected',grid).each(function(){
					var id = $(this).attr('id');
					id = id.substring(id.lastIndexOf('row')+3);
					$.getJSON('<?=site_url("ajax/tracks/get")?>/'+id,function(data){
						//var playlist_template = $("<div class=\"playlist-item ui-state-default ui-corner-all\"><u></u> by <i></i></div>");
						var playlist_id = $("#track-selector").data('playlist');
						//$('u',playlist_template).html(data.title);
						//$('i',playlist_template).html(data.artists_str);
						//playlist_template.data('track_item',data);
						//playlist_template.appendTo($("#"+$("#track-selector").data('playlist')+" .playlist-sortable"));
						playlists[Number(playlist_id.replace("playlist-",""))-1].add_item(data);
					});
				})
				
			}}
			],
		searchitems : [
			{display: 'Title', name : 'title'},
			{display: 'Artist', name : 'artists', isdefault: true}
			],
		sortname: "title",
		sortorder: "asc",
		usepager: true,
		title: 'Tracks',
		useRp: true,
		rp: 15,
		themeRoller:true,
		width: 580,
		height: 200,
		resizable:false,
		singleSelect: true
	});
	var dragging_data;
	$('.playlist-sortable').sortable({
		containment: '#container',
		cursor: 'move',
		placeholder: "ui-state-highlight ui-corner-all",
		scroll: false,
		appendTo: '#container',
		helper: 'clone',
		connectWith: '.playlist-sortable',
		forcePlaceholderSize: true,
		start: function (event, ui) {
			dragging_data = $(ui.item).data();
			$('#track-trash').show();
			$('#track-trash').width($('#main-middle').innerWidth());
			$('#main-middle').hide();
		},
		stop: function(){
			$('.playlist-sortable',"#track-trash").children().remove();
			$('#track-trash').hide();
			$('#main-middle').show();
		},
		update: function (event, ui) {
			$(ui.item).data('track_item',dragging_data.track_item);
			playlists[0].update_items();
			playlists[1].update_items();
			playlists[2].update_items();
			playlists[3].update_items();
			
		}
	});
	$('#track-selector').hide();
	$('#track-trash').hide();
	$('.add-track-btn').click(function(event){
		var self=this;
		event.stopPropagation();
		$('.add-track-btn').not(this).each(function(index,el){
			var p=$(this).parent();
			p.removeClass('selector-shown');
			p.addClass('ui-corner-bl ui-corner-br');
			p.css('marginLeft','');
			p.width("auto");
		});
		var p = $(this).parent();
		var newWidth=0;
		var pAlign = "left";
		
		
		if(p.parent().parent().hasClass('right'))
			pAlign = "right";
		if(p.hasClass('selector-shown')){
			p.removeClass('selector-shown');
			p.addClass('ui-corner-bl ui-corner-br');
			p.css('marginLeft','');
			p.width("auto");
			$('#track-selector').hide();
			$(document).unbind('click',hidePopup);
		} else {
			$(document).bind('click',hidePopup);
			var popupOffset=$("#main-body").offset();
			var popup = $("#track-selector");
			popup.show();
			p.addClass('selector-shown');
			newWidth=p.outerWidth()*0.02 + 1;
			if(pAlign === "right") {
				p.removeClass('ui-corner-bl');
				p.css('marginLeft',-newWidth);
				popupOffset.left=p.offset().left-popup.outerWidth()+2;
			} else {
				newWidth+=p.outerWidth();
				p.removeClass('ui-corner-br');
				p.width(newWidth+"px");
				popupOffset.left=p.offset().left+newWidth-2;
			}
			
			if(popupOffset.top < p.offset().top && popupOffset.top+popup.outerHeight() < p.offset().top+p.outerHeight() ){
				popupOffset.top = p.offset().top+p.outerHeight() - popup.innerHeight() + $(this).innerHeight()/2;
			}
			
			popup.offset(popupOffset);
			var playlist = p;
			while(!playlist.hasClass('playlist')){
				playlist = playlist.parent();
			}
			popup.data('playlist',playlist.attr('id'));
		}
	});
	var hidePopup = function(event){
		var status = $("#track-selector").css('display');
		if (status === "block") {
			$('.add-track-btn').each(function(index,el){
				var p=$(this).parent();
				p.removeClass('selector-shown');
				p.addClass('ui-corner-bl ui-corner-br');
				p.css('marginLeft','');
				p.width("auto");
			});
			$('#track-selector').hide();
		}
	}
	$("#track-selector").click(function(event){
		event.stopPropagation();
	});
	$('.playlist-sortable').disableSelection();
	$('#music-man-btn').button().click(function(){
		$('#music-manager').dialog('open');
	});
	var sliderValue=[];
	$( "#slider-2d" ).slider2d({
		orientation: 'both',
		animate: 'slow',
		value: [0,0],
		min:-100,
		max:100,
		slide: function(event, ui){
			var playlistValues=[
				{
					'x':1-((ui.value[0] - (-100))/200),
					'y':1+(ui.value[1] - (+100))/200
				},
				{
					'x':1-(ui.value[0] - (-100))/200,
					'y':1-(ui.value[1] - (-100))/200
				},
				{
					'x':1+(ui.value[0] - (+100))/200,
					'y':1+(ui.value[1] - (+100))/200
				},
				{
					'x':1+(ui.value[0] - (+100))/200,
					'y':1-(ui.value[1] - (-100))/200
				}
			]; //tl,br,tr,bl
			
			for(i=0;i<4;i++){
				
				playlistValues[i].final = playlistValues[i].x*playlistValues[i].y; // Final value!
			}
			adjust_volume(playlistValues[0].final,playlistValues[1].final,playlistValues[2].final,playlistValues[3].final);
		}
	});

	$('#music-manager').dialog({
		autoOpen: false,
		modal: true,
		width: 'auto',
		open: function(event, ui) {
			$("body").css({ overflow: 'hidden' });
			
		},
		beforeClose: function(event, ui) {
			$("body").css({ overflow: 'inherit' })
		}
	});

	$('#edit-track-dialog').dialog({
		autoOpen: false,
		modal: true,
		width: 'auto',
		buttons: {
			Save: function() {
				var self = this;
				$("form",this).ajaxSubmit({
					dataType: 'json',
					success: function(response, statusText, xhr, $form) {
						if(response.status=="success"){
							$(self).dialog("close");
						} else {
							alert(response.error);
						}
					}
				});
			},
			Cancel: function() {
				$(this).dialog("close");
			}
		},
		close : function(){
			$("form",this).resetForm();
			flexigrids.flexReload();
		}
	});

	$('#add-track-dialog').dialog({
		autoOpen: false,
		modal: true,
		width: 310,
		minWidth: 310,
		buttons: {
			Save: function() {
				var self = this;
				$("form",this).ajaxSubmit({
					dataType: 'json',
					success: function(response, statusText, xhr, $form) {
						if(response.status=="success"){
							$(self).dialog("close");
						} else {
							alert(response.error);
						}
					}
				});
			},
			Cancel: function() {
				$(this).dialog("close");
			}
		},
		close : function(){
			$("form",this).resetForm();
			flexigrids.flexReload();
		}
	});
});
</script>
<body>
	<div class="container ui-widget" style="width:800px; padding:0px 20px;">
		<div class="main top ui-dialog-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
			<h1>X-Fade</h1>
		</div>
	</div>
	<div class="ui-widget ui-widget-content" style="background-image: none; padding: 5px 0px;">
		<div class="ui-widget ui-state-active ui-corner-all" style="margin:auto; display:block; padding:10px; width:600px; height:400px;">
			<div class="ui-button-text">
				<div id="player" class="main player">
					<h2>Player Area!</h2>
					<p> Unfortunately, it looks as though you might not have flash installed, so you can't see it.</p>
				</div>
			</div>
		</div>
		
	</div>
	<div id="container" class="container ui-widget ui-dialog-titlebar ui-corner-bottom ui-helper-clearfix" style="background:#333333; width:800px; padding:20px;">
		<div id="main-body" class="main body">
			<div class="left">
				<?$this->load->view("shared/playlist",array("title"=>"Playlist 1","id"=>"playlist-1"))?>
				<?$this->load->view("shared/playlist",array("title"=>"Playlist 2","id"=>"playlist-2"))?>
			</div>
			<div class="right">
				<?$this->load->view("shared/playlist",array("title"=>"Playlist 3","id"=>"playlist-3"))?>
				<?$this->load->view("shared/playlist",array("title"=>"Playlist 4","id"=>"playlist-4"))?>
			</div>
			
			<div class="middle">
				<div id="track-trash" class="ui-dialog ui-widget ui-widget-content ui-corner-all">
					<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
						<span id="ui-dialog-title-dialog" class="ui-dialog-title">Discard Track</span>
					</div>
					<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content">
						<div class="playlist-sortable">
						</div>
					</div>
				</div>
				<div id="main-middle">
					<div class="center-block" style="width:200px;height:200px;margin-bottom:10px;">
						<div id="slider-2d" style="width:200px;height:200px;"></div>
					</div>
					<div style="display:none;">
						<input type="text" size="4" id="valx1" />,<input type="text" size="4" id="valy1" /> -> <input type="text" size="4" id="val1" /><br />
						<input type="text" size="4" id="valx2" />,<input type="text" size="4" id="valy2" /> -> <input type="text" size="4" id="val2" /><br />
						<input type="text" size="4" id="valx3" />,<input type="text" size="4" id="valy3" /> -> <input type="text" size="4" id="val3" /><br />
						<input type="text" size="4" id="valx4" />,<input type="text" size="4" id="valy4" /> -> <input type="text" size="4" id="val4" /><br />
					</div>
					<br />
					<button id="music-man-btn" class="music-btn center-block" style="margin-top:10px;">Open Music Manager</button>
					<br />
					<div class="center-block ui-corner-all" style="width:200px; height:200px; margin-bottom:10px; border:1px solid #666; background-color:#999; padding:10px;">
						Brought to you by:
						<hr style="color:#666; background-color:#666;height:2px;border:0px;"/>
						<ul>
							<li> Terek Campbell </li>
							<li> Andrew Fischer </li>
							<li> Anwen Fredriksen </li>
							<li> Bradley Henke </li>
							<li> Scott Pledger </li>
						</ul>
					</div>
				</div>
			</div>
			
		</div>
		<div class="ui-helper-clearfix"></div>
	</div>
	
	<div id="music-manager" title="Music Manager">
		<?$this->load->view('track_manager',array("this",$this))?>
	</div>
	<div id="add-track-dialog" title="Add Track" class="track-dialog">
		<?$this->load->view('add_track_form',array("this",$this))?>
	</div>
	<div id="edit-track-dialog" title="Edit Track" class="track-dialog">
		<?$this->load->view('edit_track_form',array("this",$this))?>
	</div>
	<div id="track-selector" class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position:absolute;top:0px;left:0px;z-index:12;">
		<?$this->load->view('find_track_form',array("this",$this))?>
	</div>
<!--
	<div id="track-selector" class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position:absolute;top:0px;left:0px;z-index:12;">
		<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
			<span class="ui-dialog-title">Track Selector</span>
		</div>
		<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
			<?$this->load->view('find_track_form')?>
		</div>
	</div>-->
</body>
</html>
